<template>
    <table>
        <thead>
            <th v-for='(column, clmIdx) in columns' :key='column.key'>
                {{column.name}}
            </th>
        </thead>
        <tbody>
            <tr v-for='(datum, datumIdx) in data' :key='datumIdx'>
                <td v-for='(column, clmIdx) in columns' :key='column.key'>
                    <div v-html='column.geneComp(true, column.editable, data, datum, datumIdx, column.key, datum[column.key])'></div>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script>
    export default {
        props: {
            columns: Array,
            data: Array
        }
    }
</script>

<style>
    table {
        font-size: 13px;
        line-height: 16px;
        border-collapse: collapse;
        background-color: #DDD;
    }
    th, td {
        padding: 4px;
        border-right: 1px solid #FFF;
        border-bottom: 1px solid #FFF;
    }
</style>